<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        html{
            width: 3000px;
            height: 5000px;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
            /* padding:10px; */
            border: 1px solid #333;
            /* display: none; */
            overflow: auto;
        }
        .sub{
            width: 500px;
            height: 800px;
            background-color: red;
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="sub"></div>
    </div>
</body>
<script>

    // 获取元素的宽度和高度的方法

    // 先获取元素
    var box = document.getElementsByClassName("box")[0];
    // console.dir(box);

    // 第一种:  box.style.xxx 只能获取内联
    // box.style.width
    // box.style.height

    // 第二种: 获取非行内样式 (写起来比较麻烦 => 万金油写法)
    // 全局方法
    // getComputedStyle(ele)  传入一个元素节点, 返回该元素所有css样式组成的对象(每次调用此方法都会重新获取)
    // var cssObj = getComputedStyle(box);
    // console.log(cssObj);

    // console.log(cssObj.width);   // "200px"
    // console.log(cssObj["height"]); // "200px"

    // console.log(parseInt(cssObj.width));   // 200    已知属性名 才能用点语法
    // console.log(parseFloat(cssObj["height"])); // 200  属性名 变量 / 字符串 -> 用[]语法

    /***
     *  getStyle 获取非行内样式 (内部 外部 默认)
     *  ele  Element 获取样式的元素
     *  cssKey string 获取的css属性 
      */
    function getStyle(ele,cssKey){
        // var cssObj = getComputedStyle(ele);
        // return cssObj[cssKey];

        return getComputedStyle(ele)[cssKey];
    }

    // console.log(getStyle(box,"width"));
    // console.log("普通宽高",parseInt(getStyle(box,"width")),parseInt(getStyle(box,"height")));


    // 第三种: 元素节点的属性 宽高相关   
    // clientWidth  clientHeight   获取元素的可视宽高  (content + padding) 
    // offsetWidth  offsetHeight   获取元素的偏移宽高  (content + padding + border) 

    // 优点:
    //    可以宽度获取元素的可视宽高/偏移宽高  取值快捷
    // 缺点: 
    // a. 用clientWidth  clientHeight, offsetWidth  offsetHeight获取元素宽高时会受到 padding 和 border的影响
    // b. 对于隐藏的元素(display:none;)   clientWidth  clientHeight, offsetWidth  offsetHeight不生效

    // console.log("可视宽高",box.clientWidth,box.clientHeight);
    // console.log("偏移宽高",box.offsetWidth,box.offsetHeight);



    // 拓展 => 元素的实际宽高  (不包含滚动条)
    // console.log("可视宽高",box.clientWidth,box.clientHeight);
    // console.log("实际宽高",box.scrollWidth,box.scrollHeight);


    
    // document.documentElement  => 快捷获取html
    // document.body              => 快捷获取body
    
    // 文档的可视宽高   => 文档默认依靠html元素撑开的 => 获取html的可视宽高 -> 只有可视区域 (一屏的宽高 -> 不包含滚动条)
    // document.documentElement.clientWidth
    // document.documentElement.clientHeight
    // console.log(document.documentElement.clientWidth,document.documentElement.clientHeight);

    function getDocClient(){
        console.log(document.documentElement.clientWidth,document.documentElement.clientHeight);
    }

    getDocClient();  // 页面加载时默认执行一次

    window.onresize = function(){
        getDocClient();
    }


    // 文档的实际宽高   => 文档默认依靠html元素撑开的 => 获取html的实际宽高 ->  (一屏的宽高 -> 包含滚动区域)
    // document.documentElement.scrollWidth
    // document.documentElement.scrollHeight


    // function getDocScroll(){
    //     console.log(document.documentElement.scrollWidth,document.documentElement.scrollHeight);
    // }

    // getDocScroll();  // 页面加载时默认执行一次

    // window.onresize = function(){
    //     getDocScroll();
    // }



    // 电脑分辨率       页面版心(1226 不会超过1280)
    // 1280x960           
    // 1366x768
    // 1920x1080      将页面统一放大1.25倍  => 1920   => 页面(1536)
    // 2560x1600      将页面统一放大2倍     => 2560   => 页面(1280)
    // 3456x          将页面统一放大2.5倍   => 3456   => 页面(1382)






</script>
</html>